import { defineComponent, reactive } from 'vue';
import { useMouse } from '@/assets/js/hooks';

// <UseMouse v-slot="{ x, y }">
//   <p> 鼠标位置 at: {{ x }}px {{ y }}px</p>
// </UseMouse>
export const UseMouse = defineComponent({
  name: 'UseMouse',
  props: [ 'touch', 'resetOnTouchEnds', 'initialValue' ],
  setup(props, context) {
    const { slots } = context;
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    // console.log(context.attrs);
    // 插槽（非响应式的对象，等价于 $slots）
    // console.log(context.slots);
    // 触发事件（函数，等价于 $emit）
    // console.log(context.emit);
    // 暴露公共属性（函数）
    // console.log(context.expose);
    // console.log(props);
    const data = reactive(useMouse(props));

    return () => {
      if (slots.default) return slots.default(data);
    };
  }
});
